<template>
  <div class="page-wrap">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="top-info" v-if="pageInfo.length > 0">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="cli" style="background: rgba(6, 130, 244, 0.05)">
                <div class="img"><img src="@/assets/homeicon12.png" /></div>
                <div class="data">
                  <span>实时班产</span><strong>{{ pageInfo[0].实时班产 }}</strong>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cli" style="background: rgba(6, 130, 244, 0.05)">
                <div class="img"><img src="@/assets/homeicon13.png" /></div>
                <div class="data">
                  <span>生产效率</span><strong>{{ pageInfo[0].生产效率 }}</strong>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cli" style="background: rgba(6, 130, 244, 0.05)">
                <div class="img"><img src="@/assets/homeicon15.png" /></div>
                <div class="data">
                  <span>实时断头</span><strong>{{ pageInfo[0].实时断头 }}</strong>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="cli" style="background: rgba(255, 117, 57, 0.05)">
                <div class="img"><img src="@/assets/homeicon9.png" /></div>
                <div class="data">
                  <span>实时闲置锭</span><strong>{{ pageInfo[0].实时闲置锭 }}</strong>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cli" style="background: rgba(255, 117, 57, 0.05)">
                <div class="img"><img src="@/assets/homeicon10.png" /></div>
                <div class="data">
                  <span>实时滑锭</span><strong>{{ pageInfo[0].实时滑锭 }}</strong>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cli" style="background: rgba(255, 117, 57, 0.05)">
                <div class="img"><img src="@/assets/homeicon5.png" /></div>
                <div class="data">
                  <span>不良锭子</span><strong>{{ pageInfo[0].实时不良锭子 }}</strong>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-else style="text-align: center">暂无数据</div>
      </el-col>
      <el-col :span="6">
        <Chart height="100%" width="100%" :list="pageChart || []" />
      </el-col>
    </el-row>
    <div class="spin-status-inner">
      <div class="main">
        <div v-for="(x, index) in pageList" :key="index" class="list">
          <div class="wrap">
            <div class="title">
              <el-row>
                <el-col :span="6">
                  <span class="status"
                    ><el-tag v-if="x.运行状态 == '纺纱'" type="success" effect="dark">{{ x.运行状态 }}</el-tag>
                    <el-tag v-if="x.运行状态 == '落纱'" type="warning" effect="dark">{{ x.运行状态 }}</el-tag>
                    <el-tag v-if="x.运行状态 == '停机'" type="danger" effect="dark">{{ x.运行状态 }}</el-tag></span
                  >
                </el-col>
                <el-col :span="18" style="text-align: center"
                  ><strong>{{ x.产品名称 }}</strong></el-col
                >
                <el-col :span="6" style="text-align: right">{{ x.机台编号 }}</el-col>
              </el-row>
            </div>
            <div class="data">
              <span>产量 {{ x.产量 }}</span
              ><span class="dt"
                >断头<em>{{ x.断头 }}</em></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import dayjs from 'dayjs'
import Chart from '@/components/Charts/MixChart2'

//console.log(BlockTitle)
export default {
  name: 'AllFactory',
  components: { Chart },
  data() {
    return {
      pageInfo: [],
      pageList: [],
      pageChart: [],
    }
  },
  computed: {},
  created() {
    this.getData()
    this.getData2()
    this.getData3()
  },
  methods: {
    async getData() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      try {
        const res = await request({
          url: '/db/getDataBySp',
          method: 'post',
          data: {
            spName: 'sp_cjsj_hz',
            params: [
              { isnum: false, value: dayjs(this.toDate).format('YYYY-MM-DD') },
              { isnum: true, value: 50 },
            ],
            pagenum: 1,
            pagesize: 20,
          },
          // data: { sql, pagenum, pagesize },
        })
        console.log(res)
        if (res.list.length == 0) {
          loading.close()
          return
        }
        // const { pageNum, pageSize, pages, prePage, size, startRow, total } = res.obj

        this.pageInfo = res.list
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
    async getData2() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      try {
        const res = await request({
          url: '/db/getDataBySp',
          method: 'post',
          data: {
            spName: 'sp_cjsj_dt',
            params: [
              { isnum: false, value: dayjs(this.toDate).format('YYYY-MM-DD') },
              { isnum: true, value: 50 },
            ],
            pagenum: 1,
            pagesize: 20,
          },
          // data: { sql, pagenum, pagesize },
        })
        console.log(res)
        if (res.list.length == 0) {
          loading.close()
          return
        }
        // const { pageNum, pageSize, pages, prePage, size, startRow, total } = res.obj

        this.pageChart = res.list
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
    async getData3() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      try {
        const res = await request({
          url: '/db/getDataBySp',
          method: 'post',
          data: {
            spName: 'sp_cjsj_jt',
            params: [
              { isnum: false, value: dayjs(this.toDate).format('YYYY-MM-DD') },
              { isnum: true, value: 50 },
            ],
            pagenum: 1,
            pagesize: 20,
          },
        })
        console.log(res)
        if (res.list.length == 0) {
          loading.close()
          return
        }

        this.pageList = res.list
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.sub-item {
  width: 44px;
  text-align: center;
  border-right: 1px #eee solid;
  flex-shrink: 0;
}

.top-wrap {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.spin-status {
  margin-top: 10px;
  height: calc(100vh - 170px);
  display: flex;
}

.top-info {
  padding: 0 5px;

  .cli {
    padding: 20px 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    text-align: center;
    color: #313131;
    overflow: hidden;
  }

  .img {
    width: 30%;
    position: absolute;
    left: -10px;
    bottom: 0;

    img {
      opacity: 0.3;
    }
  }

  .data {
    text-align: center;
    width: 100%;
  }

  strong {
    display: block;
    position: relative;
    margin-top: 10px;
    font-size: 26px;
  }

  span {
    display: block;
    font-weight: normal;
    color: #666;
  }
}

.spin-status-inner {
  width: 100%;
  display: block;

  .main {
    margin: 0 -10px;

    .list {
      width: 25%;
      display: inline-block;
      padding: 10px;
      margin-bottom: 20px;

      .wrap {
        border: 1px solid rgba(6, 130, 244, 0.3);
        border-radius: 6px 6px 0 0;

        background: rgba(6, 130, 244, 0.05);

        .title {
          margin-bottom: 10px;
          padding: 10px;
          border-bottom: 1px solid #fff;
          border-radius: 6px 6px 0 0;
          font-size: 14px;
          position: relative;

          background: rgba(6, 130, 244, 0.3);

          .status {
            position: absolute;
            left: -10px;
            top: -10px;
          }
        }

        .data {
          padding: 10px;
          font-size: 18px;
          display: flex;
          justify-content: space-between;

          span {
            flex: 2;
          }

          span.dt {
            text-align: right;

            em {
              margin-left: 10px;
              font-size: 20px;
              font-weight: bold;
              color: #ff0000;
              font-style: normal;
            }
          }
        }
      }
    }
  }
}
</style>
